<template>
  <a-modal
    :title="title"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :getter="24">
          <a-col :md="12" :sm="24">
            <a-form-item
              label="选择物料"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <material-select-madal v-decorator="['matCode', {rules: [{required: true, message: '请选择选择物料'}]}]" title='选择物料'></material-select-madal>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              label="数量"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                placeholder="输入数量"
                :disabled="editable || showable"
                v-decorator="['num', {rules: [{required: true, message: '输入数量'}]}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :getter="24">
          <a-col :md="12" :sm="24">
            <a-form-item
              label="物料条码"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                placeholder="物料条码"
                :disabled="editable || showable"
                v-decorator="['matBarcode', {rules: [{required: true, message: '选择供应商'}]}]"/>
            </a-form-item>
          </a-col>

          <a-col :md="12" :sm="24">
            <a-form-item
              label="供应商"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                placeholder="供应商"
                :disabled="editable || showable"
                v-decorator="['supplier', {rules: [{required: true, message: '选择供应商'}]}]"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>

  </a-modal>
</template>

<script>
import { FormMixin } from '@/mixins/FormMixin'
import pick from 'lodash.pick'
import MaterialSelectMadal from '@/views/main/base/material/materialSelectMadal'

export default {
  name: 'editMatForm',
  mixins: [FormMixin],
  components: {
    MaterialSelectMadal
  },
  data(){
    return {
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this)
    }
  },
  methods:{
    init(type,row){
      this.visible = true
      const { form: { setFieldsValue, resetFields } } = this
      resetFields()
      if(["edit"].includes(type)){
        this.$nextTick(() => {
          setFieldsValue(pick(row, ['id', 'matCode', 'num','matBarcode','supplier']))
        })
      }
    },
    handleOk () {
      this.form.validateFields(async (err, values) => {
        if (!err) {
          this.confirmLoading = true
          // values.planStartDate = values.planStartDate.format('YYYY-MM-DD HH:mm:ss')
          console.log(values,'value')
          try {
            this.confirmLoading = false
            this.handleCancel()
            this.$emit('ok',values)
          } catch (e) {
            this.$message.error(e.msg)
            this.confirmLoading = false
          }
        }
      })
    }
  }
}
</script>

<style scoped>

</style>